<template>
  <div class="el-scroll-box">
    <el-scrollbar ref="wrapperScroll">
      <sticky ref="sticky" :z-index="10" class-name="sub-navbar" :sticky-top="60">
        <div class="bg-mask" />
      </sticky>
      <div class="content">
        <div class="type-difficulty">
          <!-- <p>
            <label for="">类型：</label>
            <span>全部</span>
            <span>系统培训</span>
            <span>场景培训</span>
          </p> -->
          <p v-for="item in tags" :key="item.id">
            <label for="">{{ item.name }}：</label>
            <span v-for="it in item.nodes" :key="it.id" :class="[it.checked?'checked':'']" @click="tagClick(it)">{{ it.name }}</span>
          </p>
        </div>
        <!-- 搜索 -->
        <div class="search-warpper">
          <div class="question-search-box">
            <!-- <input v-model="searchParams.keyWord" type="text" placeholder="搜索您感兴趣的课程" @blur="initWindow"> -->
            <el-input v-model="searchParams.keyWord" class="m-input" placeholder="搜索您感兴趣的课程" clearable @clear="initWindow" @blur="initWindow" />
            <i class="icon el-icon-search" style="cursor: pointer" />
          </div>
        </div>
        <!-- 课程列表 -->
        <template v-if="bookList.length">
          <div class="content-item">
            <div v-for="item in bookList" :key="item.id" class="outer-warpper">
              <div class="c-item" @click="$router.push({ name: 'CourseBody', params: { id:item.id } })">
                <img :src="item.picFile" alt="">
                <div class="c-item-content">
                  <h3 :title="item.name">{{ item.name }}</h3>
                  <!-- <p>{{ item.createTime }}</p> -->
                  <p style="color:#888;font-size:14px">
                    <svg-icon icon-class="icon-shijian" /> {{ item.videoCount||0 }} 课时
                    <svg-icon icon-class="icon-gerenzhongxin" style="margin:0 5px" />{{ item.iCount||0 }} 人正在学习</p>
                </div>
              </div>
            </div>
          </div>
          <div class="page-footer" style="width:100%">
            <pagenation :params="pageData" />
          </div>
        </template>

        <!-- 暂无数据 -->
        <empty-data v-else text="暂无数据" />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import EmptyData from '@/components/EmptyData'
import Sticky from '@/components/Sticky'
import { getLearnBookQuery } from '@/api/learnCenter'
import { arrayToTree, fileHostUrl } from '@/utils'
export default {
  name: 'LearnCenter',
  components: {
    EmptyData,
    Sticky
  },
  data() {
    return {
      searchParams: {
        tagID: [],
        keyWord: ''
      },
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sizeChange: () => {},
        currentChange: () => {}
      },
      tags: [],
      bookList: [],
      allBookList: []
    }
  },
  created() {
    this.getTags()
    this.initWindow()
  },
  mounted() {
    // 监听滚动事件
    this.wrapperScroll()
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      if (this.searchParams.tagID.length) {
        vPar.setStr('TagID', this.searchParams.tagID.join(','))
      }
      getLearnBookQuery(vPar).then(vPar => {
        let nodes = []
        // 课程列表
        nodes = []
        let table = new this.SQLTable(vPar.getTable('k_learn_book'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['createTime'] = table.getValueByName('CreateTime')
          node['bookCount'] = table.getValueByName('BookCount')
          node['bookTime'] = table.getValueByName('BookTime')
          node['videoCount'] = table.getValueByName('VideoCount')
          node['picFile'] = fileHostUrl + '/' + table.getValueByName('PicFile')
          nodes.push(node)
          table.next()
        }

        // 获取正在学习人数
        const iCounts = []
        table = new this.SQLTable(vPar.getTable('k_learn_book_user'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['bookID'] = table.getValueByName('BookID')
          node['iCount'] = table.getValueByName('iCount')
          iCounts.push(node)
          table.next()
        }
        nodes.forEach(it1 => {
          iCounts.forEach(it2 => {
            if (it1.id === it2.bookID) {
              it1.iCount = it2.iCount
            }
          })
        })

        this.allBookList = nodes // 全部视频数量
        // 分页操作
        this.pagenation()
      })
    },
    // 分页操作
    pagenation() {
      this.pageData.pageNum = 1
      const allBookList = this.allBookList
      const pageNum = this.pageData.pageNum
      const pageSize = this.pageData.pageSize

      // 根据名称筛选
      this.bookList = allBookList.filter(item => {
        return item.name.includes(this.searchParams.keyWord)
      })
      this.pageData.total = this.bookList.length // 经过筛选之后的数据总数

      // 显示数据
      this.bookList = this.bookList.slice((pageNum - 1) * pageSize, pageNum * pageSize)

      this.pageData.sizeChange = (pageSize) => {
        this.pageData.pageSize = pageSize
        this.bookList = allBookList.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
      this.pageData.currentChange = (pageNum) => {
        this.pageData.pageNum = pageNum
        if (allBookList.length < this.pageData.pageSize) {
          return (this.pageData.pageNum = 1)
        }
        this.bookList = allBookList.slice((pageNum - 1) * pageSize, pageNum * pageSize)
      }
    },
    // 获取tags
    getTags() {
      const vPar = new this.ParamArr()
      getLearnBookQuery(vPar).then(vPar => {
        const nodes = []
        // 筛选条件
        const table = new this.SQLTable(vPar.getTable('k_learn_tag'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('id')
          node['pid'] = table.getValueByName('pid')
          node['name'] = table.getValueByName('Name')
          node['iType'] = table.getValueByName('iType')
          nodes.push(node)
          table.next()
        }
        this.tags = arrayToTree(nodes, { children: 'nodes' })
      })
    },
    tagClick(item) {
      this.tags.forEach(it1 => {
        if (it1.id === item.pid) {
          it1.nodes.forEach(it2 => {
            if (it2.id === item.id && !it2.checked) {
              this.$set(it2, 'checked', true)
            } else {
              this.$set(it2, 'checked', false)
            }
          })
        }
      })
      const s_tagids = []
      const getCheckItem = (nodes) => {
        nodes.forEach(item => {
          if (item.checked) {
            s_tagids.push(item.id)
          }
          if (item.nodes) {
            getCheckItem(item.nodes)
          }
        })
      }
      getCheckItem(this.tags)
      this.searchParams.tagID = s_tagids
      this.initWindow()
    },
    // 监听滚动事件
    wrapperScroll() {
      const scrollbarEl = this.$refs.wrapperScroll.wrap
      scrollbarEl.onscroll = () => {
        this.$refs.sticky.handleScroll()
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}
.bg-mask {
  width: 100%;
  height: 150px;
  background-size: 100% 150px;
  background-repeat: no-repeat;
  background-image: url('../../assets/user/learn_bg.png');
  background-position: 100% 100%;
}
.content {
  width: 80%;
  margin: 0 auto;
  .type-difficulty {
    user-select: none;
    p {
      span {
        padding: 5px 10px;
        border: 1px solid #aaa;
        margin-right: 10px;
        min-width: 120px;
        display: inline-block;
        text-align: center;
        border-radius: 4px;
        color: #aaa;
        cursor: pointer;
        &:hover {
          color: $primaryColor;
          border: 1px solid $primaryColor;
        }
        &.checked {
          color: $primaryColor;
          border: 1px solid $primaryColor;
        }
      }
    }
  }
  .search-warpper {
    display: flex;
    align-items: center;
    justify-content: end;
    .question-search-box {
      border-radius: 0;
      color: #414244;
      background: #ffffff;
      border: 1px solid #ddd;
      padding: 5px 10px;
      font-size: 14px;
      width: 300px;
      height: 40px;
      display: flex;
      align-items: center;
      &:hover {
        border-color: $plainColor;
        i {
          color: $plainColor;
        }
      }
      input {
        flex-grow: 1;
        border: none;
        outline: none;
      }
    }
  }

  .content-item {
    margin-top: 10px;
    margin-right: -20px;
    display: flex;
    flex-wrap: wrap;
    .outer-warpper {
      margin-bottom: 20px;
      width: 25%;
      flex-shrink: 0;
      .c-item {
        display: flex;
        flex-direction: column;
        img {
          width: 100%;
          height: 145px;
          object-fit: cover;
        }
        .c-item-content {
          flex-grow: 1;
          padding: 5px;
          h3 {
            display: -webkit-box; /* 盒子类型 */
            word-break: break-all; /* 自动换行的处理方法。允许在单词内换行 */
            text-overflow: ellipsis; /* 溢出时用... */
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2; /* 行数 */
          }
        }
        height: 250px;
        margin-right: 20px;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        &:hover {
          box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
          transform: translateY(0);
        }
      }
    }

  }
}
::v-deep .page-footer {
  .el-pagination {
    text-align: center;
  }
}
::v-deep .m-input {
  border: none;
  input {
    border: none;
    padding: 0;
  }
}
</style>
